<template>
	<view class="container">
		<view class="center">
			<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''" style="display: flex;">
				<image class="logo-img" style="" :src="avatarUrl"></image>
				<view class="logo-title" style="display: table;">
					<view class="logo-title"
						style="padding-top: 35px;align-items:flex-end;height: 240rpx;display: flex;">
						<text class="uer-name">{{login ? userInfo.name : '您未登录'}}</text>
						<!-- <text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text> -->
					</view>
					<view class="logo-title" style="display: flex;padding-bottom: 140rpx;align-items:flex-start">
						<text class="uer-name" style="font-size: 30rpx;width: 25%;" v-if="login">账户余额:</text>
						<text class="uer-name"
							style="font-size: 30rpx;width: 75%;padding-top: 1px;">{{userInfo.balance}}元</text>
					</view>
				</view>
			</view>
			<view class="center-list">
				<view class="center-list-item border-bottom" style="display: flex;" @click="orderList">
					<text class="list-icon">&#xe60f;</text>
					<text class="list-text">用餐记录</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
				<view class="center-list-item" style="display: flex;" @click="rechargeList">
					<text class="list-icon">&#xe639;</text>
					<text class="list-text">充值记录</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</view>
			<view class="center-list">
				<view class="center-list-item border-bottom" style="display: flex;" @click="unBindWx">
					<text class="list-icon">&#xe60b;</text>
					<text class="list-text">微信解绑</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
				<view class="center-list-item" style="display: flex;" @click="myInfo">
					<text class="list-icon">&#xe65f;</text>
					<text class="list-text">个人资料</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
				<view class="center-list-item border-bottom" style="display: flex;" @click="paymentArrears">
					<text class="list-icon">&#xe60b;</text>
					<text class="list-text">补缴欠款</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提醒" content="确定解除微信绑定吗!"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// 个人中心
	export default {
		data() {
			return {
				msgType: "error",
				login: false,
				avatarUrl: "../../static/image/personal/logo.png",
				userInfo: {
					name: "",
					balance: ""
				},
				openid: ""
			}
		},
		onShow() {
			this.getCurrent()
		},
		onReady() {
			this.getCurrent()
		},
		methods: {
			goLogin() {
				if (!this.login) {
					console.log("点击前往登录")
				}
			},
			orderList() {
				uni.navigateTo({
					url: '/pages/personal/orderList'
				});
			},
			rechargeList() {
				uni.navigateTo({
					url: '/pages/personal/rechargeList'
				});
			},
			unBindWx() {
				this.msgType = 'error'
				this.$refs.alertDialog.open();
			},
			paymentArrears(){
				uni.navigateTo({
					url: '/pages/personal/payArrears'
				});
			},
			dialogConfirm() {
				let that = this;
				uni.request({
					url: that.baseUrl + '/my/unBindWx',
					method: 'POST',
					data: {
						openid: that.openid
					},
					success(res) {
						if (res.data.type === 'success') {
							that.login = false;
							that.userInfo.balance = ""
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					}
				})
			},
			dialogClose() {

			},
			myInfo() {
				uni.navigateTo({
					url: '/pages/personal/myInfo'
				});
			},
			getCurrent() {
				let that = this;
				uni.getStorage({
					key: 'wx_openid',
					success: function(res) {
						that.openid = res.data;
						uni.request({
							url: that.baseUrl + '/wx/user/getCustomerInfo',
							data: {
								openid: that.openid
							},
							success(res) {
								if (res.data.type === 'success') {
									that.userInfo.balance = res.data.data.balance;
									that.userInfo.name = res.data.data.name;
									if (res.data.data.mobile !== '') {
										that.login = true;
									}
								}
							}
						})
					}
				});
			}

		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/font/ali/font_.ttf') format('truetype');
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #4c94d9;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 10upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4c94d9;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>